<!-- 领券中心 -->
<template>
  <view class="coupon">
    <aster-back font-color="#333" :show-title="true" title="领券中心" />
    <aster-tabs :list="categoryList" :current="current" line-color="#ff6a6c" @click="handleClick">
      <template #right>
        <view style="padding-left: 4px" @tap="showList = true">
          <uni-icons type="list" size="30" />
        </view>
        <view v-show="showList" class="aster-tootip">
          <view class="aster-tootip__wrapper">
            <view
              class="aster-tootip__wrapper__indicator"
              style="top: -4px; width: 14px; height: 14px"
            />
            <view class="aster-tootip__wrapper__list">
              <view
                class="aster-tootip__wrapper__list__btn"
                v-for="(item, index) in categoryList"
                :key="index"
                @click="selectItem(item, index)"
              >
                <text class="aster-tootip__wrapper__list__btn__text">{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </aster-tabs>
    <view class="coupon__content">
      <view v-for="(item, index) in couponList" :key="index" class="coupon__content__item">
        <view class="coupon__content__item__left">
          <view class="coupon__content__item__left__title">{{ item.title }}</view>
          <view class="coupon__content__item__left__image">
            <image v-for="(m, i) in item.imgs" :key="i" :src="m" alt="" />
          </view>
        </view>
        <view
          :class="
            item.state == '0'
              ? 'coupon__content__item__right'
              : 'coupon__content__item__right coupon__disable'
          "
        >
          <view class="coupon__content__item__right__discount">
            {{ discountName(item.discount) }}
          </view>
          <view class="coupon__content__item__right__quota">
            {{ quotaName(item.discount, item.quota) }}
          </view>
          <view class="coupon__content__item__right__btn" v-if="item.state == '0'">
            <button @click="to_receive(item.id, index)">立即领取</button>
          </view>
          <view class="coupon__content__item__right__use" v-else>
            <button @click="to_use(item.id)">去使用</button>
          </view>
          <view class="coupon__content__item__right__receive" v-if="item.state != '0'">
            <icon class="iconfont icon-yilingqu" />
          </view>
        </view>
      </view>
    </view>
    <aster-tabbar
      :customStyle="{
        borderTopLeftRadius: '10px',
        borderTopRightRadius: '10px',
        backgroundColor: '#ff6a6c',
      }"
    >
      <view class="coupon__bottom">
        <view class="coupon__bottom__btn" @click="to_myCoumpn()">我的优惠券</view>
      </view>
    </aster-tabbar>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import AsterTabs from '@/components/common/aster-tabs.vue';
  import AsterTabbar from '@/components/common/aster-tabbar.vue';
  import { getCategoryList } from '@/services/api/tabbar/category';
  import { getCouponList } from '@/services/api/coupon/coupon';
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { ResultEnum } from '@/enums/httpEnum';
  import { CouponInfoModel } from '@/services/model/couponModel';
  import { Toast } from '@/utils/uniapi/prompt';
  import { router } from '@/utils/router';
  import config from '@/utils/config';

  const categoryList = ref();
  const current = ref(0);
  const showList = ref(false);
  const couponList = ref<CouponInfoModel[]>();

  onLoad(() => {
    getCategoryList().then(({ data }) => {
      if (data.code === ResultEnum.SUCCESS) {
        categoryList.value = data.data;
        loadData(categoryList.value[0].id);
      }
    });
  });

  const handleClick = (item: any) => {
    console.log('item', item);
  };

  const selectItem = (item: any, index: number) => {
    current.value = index;
    loadData(item.id);
    showList.value = false;
  };

  const loadData = (id: number) => {
    getCouponList(id).then(({ data }) => {
      if (data.code === ResultEnum.SUCCESS) {
        couponList.value = data.data.coupons;
      }
    });
  };

  const discountName = (discount: number) => {
    return '￥' + Number(discount);
  };

  const quotaName = (discount: number, quota: number) => {
    return '满' + Number(quota) + '减' + Number(discount);
  };

  const to_receive = (id: number, index: number) => {
    console.log('id = ', id);
    if (couponList.value) couponList.value[index].state = '1';
    Toast('领取成功');
  };

  const to_use = (id: number) => {
    console.log('id = ', id);
    Toast('去使用');
  };

  const to_myCoumpn = () => {
    console.log('to_my_coupon');
    router.push(config.route.my_coupon);
  };
</script>
<style lang="scss" scoped>
  page {
    padding: 0 20rpx;
  }

  .aster-tootip {
    transition-duration: 300ms;
    transition-timing-function: ease-out;
    position: absolute;
    top: 0px;
    // left: 36.9954px;
    z-index: 10071;
    transform: translateY(100%);
    margin-bottom: -10px;
    transition-property: opacity;

    &__wrapper {
      display: flex;
      flex-direction: row;
      justify-content: center;

      &__indicator {
        position: absolute;
        background-color: #060607;
        width: 14px;
        height: 14px;
        bottom: -4px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        border-radius: 2px;
        z-index: -1;
      }

      &__list {
        background-color: #060607;
        position: relative;
        flex: 1;
        border-radius: 5px;
        padding: 0 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        overflow: hidden;

        view {
          display: flex;
          flex-direction: column;
          flex-shrink: 0;
          flex-grow: 0;
          flex-basis: auto;
          align-items: stretch;
          align-content: flex-start;
        }

        &__btn {
          padding: 11px 13px;

          &__text {
            line-height: 12px;
            font-size: 13px;
            color: #fff;
          }
        }
      }
    }
  }

  .coupon {
    &__disable {
      background-color: #e1e1e1 !important;
    }

    &__content {
      margin-top: 20rpx;
      margin-bottom: 20rpx;

      &__item {
        height: 250rpx;
        margin-bottom: 20rpx;
        display: flex;

        &__left {
          background-color: #fff;
          flex: 1;
          height: 100%;
          padding: 10rpx;
          border-radius: 20rpx;

          &__title {
            height: 20%;
          }

          &__image {
            width: 100%;
            height: 80%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10rpx;
            padding-right: 20rpx;

            image {
              width: 140rpx;
              height: 120rpx;
            }
          }
        }

        &__right {
          background-color: rgb(240, 180, 219);
          width: 220rpx;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-flow: column;
          border-radius: 20rpx;

          &__discount {
            font-size: 36rpx;
            font-weight: 600;
            line-height: 1;
            color: #ff6a6c;
            padding-top: 40rpx;
          }

          &__quota {
            padding: 10rpx 0;
            font-size: 24rpx;
          }

          &__btn {
            button {
              width: 100%;
              color: #fff;
              font-size: 28rpx;
              background-color: #ff6a6c;
              line-height: 1;
              padding: 20rpx;
              border-radius: 20rpx;
            }
          }

          &__use {
            button {
              width: 100%;
              color: #ff6a6c;
              font-size: 28rpx;
              background-color: #e1e1e1;
              line-height: 1;
              padding: 20rpx;
              border-radius: 20rpx;
              border: 1px solid #ff6a6c;
            }
          }

          &__receive {
            position: absolute;
            transform: translate(50%, -60%);
            icon {
              font-size: 140rpx;
              line-height: 1;
              color: #ff6a6c;
            }
          }
        }
      }
    }

    &__bottom {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;

      &__btn {
        color: #fff;
      }
    }
  }
</style>
